import React from "react";
import  './Sign.css'
import EnturstWithPlanNum from  './compontents/EnturstWithPlanNum';


import {
    AutoCenter,
    Button,
    Calendar,
    CheckList,
    Dialog,
    Form,
    Input,
    Modal, NoticeBar,
    Popup,
    SearchBar, Selector, Space,
    Steps, Swiper, Tabs,
    TextArea,
    Toast, WaterMark
} from 'antd-mobile'
import {Step} from "antd-mobile/es/components/steps/step";
import styles from  './Entrust.less'
import App from "./App";
import moment, {calendarFormat} from "moment";
import cookie from "_react-cookies@0.1.1@react-cookies";
import {assertInputSourceMap, assertSourceType} from "@babel/core/lib/config/validation/option-assertions";

export default class Entrust extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            phone: '',       //电话
            name:'',


            planName: '',            //计划名称
            planType: '',            //计划类型
            dayPlan: '',             //日计划
            planDate: '',            //计划时间


            planList:[],     //按周期筛选出的计划列表
            planNumberList:[],   //按周期筛选出的计划号
            planListSelected:[],   //选中的计划号列表
            trusteeList: '',             //受托人列表
            trusteeId:'',   //受托人ID



            planNumber: '',         //计划号
            trustee: '',             //受托人
            startDate: '',           //委托开始日期
            endDate: '',             //委托结束日期
            reason: '',              //委托原因

            stap: 0,                //步骤条组件
            bottonPopShow: false,   //按时间段委托底部弹出组件
            bottomPopShow1:false,   //按计划号委托底部弹出组件
            closeOnAction: false,    //弹出框组件
            dialogVisible: false,    //受托人选择组件

            options:[],


            message: '测试值',


            peopleList: ["A", "B", "C", "D", "E", "F", "G"],


        }
    }

    onFinish = (values: any) => {

        if (this.state.trustee.length > 0) {
            if (this.state.startDate === '') {
                return (
                    Toast.show({
                        icon: 'fail',
                        content: '请选择委托周期',
                        position: 'center',
                    })
                )
            }
            console.log(values)
            this.setState({signState: values["inOrOut"]})
            this.setState({planNumber: values["planNumber"]})
            this.setState({reason: values["reason"]})
            this.setState({stap: 1})
            this.setState({bottonPopShow: true})
            this.setState({entrustedTime: values["time"]})


            //提取用户信息
            const url1 ='http://htjoa.nrnet.cn/dc14/construct/user/user?phone='+this.state.phone;
            fetch(url1,{method:"GET"
            })
                .then(res=>res.json()).then(result=>{
                if (result["code"]=="200"){
                    console.log("人员信息",result)
                    this.setState({name:result["name"]})
                }
                else {
                    Toast.show("暂无该用户信息")
                }
            })
        } else {
            return (
                Toast.show({
                    icon: 'fail',
                    content: '请选择受托人',
                    position: 'center',
                })
            )
        }


        //TODO 如果没有查到有关信息


    }
    

    submitSign = () => {
        this.state.planListSelected.map((element ,index)=>{
            console.log(this.state.trustee)
            const url ='http://htjoa.nrnet.cn/dc14/construct/proxy/setproxy?phone='+this.state.phone+'&entrustedId='+this.state.trusteeId+'&entrustedName='+this.state.trustee+'&reason='+this.state.reason+'&planNumber='+element["label"];
            fetch(url, {
                method: "get",
            }).then(res=>res.json())
                .then(result=>{
                    console.log(result)
                    if (result["code"]==200){
                        console.log("yes")
                    }
                    else {
                        Modal.alert({
                            content: '提交失败,请检查网络',
                            onConfirm: () => {
                                // TODO 跳转回主页
                                // Toast.show("返回主页")
                                // this.props.history.push('/dc14/const/index')
                                this.setState({bottonPopShow: false})
                            },
                        })
                    }
                })
            }
        )
        Modal.alert({
            content: '委托提交成功',
            onConfirm: () => {
                // TODO 跳转回主页
                // Toast.show("返回主页")

            },
        })
        this.props.history.push('/mainpage')


    }

    getTrusteeList =()=>{
        this.refIns = React.createRef();
        const url = 'http://htjoa.nrnet.cn/dc14/construct/user/trustee';
        fetch(url, {
            method: "GET"
        })
            .then(res => res.json()).then(result => {
            console.log(result)
            if (result["code"] == "200") {
                console.log(result)
                this.setState({trusteeList: result["trustee"]})
            }
        })
    }


    componentDidMount() {
        this.setState({phone:cookie.load("phone")})
        document.title='创建委托'
        //this.getTrusteeList()


        const url2 ='http://htjoa.nrnet.cn/dc14/construct/user/trustee?phone='+cookie.load("phone");
        fetch(url2,{method:"GET"
        })
            .then(res=>res.json()).then(result=>{
            if (result["code"]=="200"){
                console.log(result["trustee"])
                this.setState({trusteeList:result["trustee"]})
            }
        })
    }



    render() {
        const options = [
        ]


        let list = [...this.state.trusteeList];
        return (
            <div style={{marginTop:'15px'}}>
                {/*<Steps current={this.state.stap}>*/}
                {/*    <Step title='1. 填写委托信息'/>*/}
                {/*    <Step title='2. 提取信息'/>*/}
                {/*    <Step title='3. 提交委托'/>*/}
                {/*</Steps>*/}

                <EnturstWithPlanNum />

                {/*//按周期委托需选定计划号代码留存*/}
                {/*<Tabs>*/}
                {/*    <Tabs.Tab title='按计划号委托' key='planNumer'>*/}
                {/*        <EnturstWithPlanNum />*/}
                {/*    </Tabs.Tab>*/}
                {/*    <Tabs.Tab title='按时间段委托' key='planTime'>*/}
                {/*        <Form*/}
                {/*            ref={this.refIns}*/}
                {/*            onFinish={this.onFinish}*/}
                {/*            footer={*/}
                {/*                <Button block type='submit' color='primary' size='large'>*/}
                {/*                    提取信息*/}
                {/*                </Button>*/}
                {/*            }*/}
                {/*            className='signForm'>*/}

                {/*            <Form.Item*/}

                {/*                label="受托人"*/}
                {/*            >*/}
                {/*                <Input value={this.state.trustee}/>*/}
                {/*                <Button*/}
                {/*                    color='primary' fill='outline'*/}
                {/*                    onClick={() => {*/}
                {/*                        this.setState({dialogVisible: true})*/}
                {/*                    }}*/}
                {/*                >*/}
                {/*                    选择受托人*/}
                {/*                </Button>*/}


                {/*            </Form.Item>*/}

                {/*            <Form.Item*/}

                {/*                label="委托周期"*/}
                {/*            >*/}
                {/*                <Button*/}

                {/*                    color='primary' fill='outline'*/}
                {/*                    onClick={() => {*/}
                {/*                        Dialog.show({*/}
                {/*                            closeOnMaskClick:true,*/}
                {/*                            disableBodyScroll:false,*/}
                {/*                            content: (*/}
                {/*                                <div style={{height:"300px"}}>*/}
                {/*                                <Calendar*/}
                {/*                                    selectionMode='range'*/}
                {/*                                    onChange={val => {*/}
                {/*                                        //TODO 将数据存储到*/}
                {/*                                        // console.log(val[0])*/}
                {/*                                        const d = new Date(val[0]);*/}


                {/*                                        // const  startdate =d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() ;*/}
                {/*                                        this.setState({startDate: moment(d).format('YYYYMMDD')})*/}
                {/*                                        const d1 = new Date(val[1]);*/}
                {/*                                        this.setState({endDate: moment(d1).format('YYYYMMDD')})*/}
                {/*                                        // const  endDate =d1.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() ;*/}

                {/*                                        // console.log(val[1])*/}

                {/*                                        //提起委托信息*/}
                {/*                                        const url1 ="http://htjoa.nrnet.cn/dc14/construct/plan/planList?startDate="+moment(d).format('YYYYMMDD')+"&endDate="+moment(d1).format('YYYYMMDD')+"&phone="+this.state.phone;*/}
                {/*                                        fetch(url1,{method:"GET"*/}
                {/*                                        })*/}
                {/*                                            .then(res=>res.json()).then(result=>{*/}
                {/*                                            if (result["code"]=="200"){*/}

                {/*                                                console.log(result)*/}
                {/*                                                this.setState({planList:result["trustee"]})*/}
                {/*                                                this.setState({planNumberList:result["planList"]})*/}
                {/*                                            }*/}
                {/*                                            else {*/}
                {/*                                                Toast.show("暂无委托")*/}
                {/*                                            }*/}
                {/*                                        })*/}

                {/*                                    }}*/}
                {/*                                />*/}
                {/*                                </div>*/}
                {/*                            ),*/}
                {/*                            closeOnAction: true,*/}
                {/*                            actions: [*/}
                {/*                                {*/}
                {/*                                    key: 'close',*/}
                {/*                                    text: '确定',*/}
                {/*                                }]*/}
                {/*                        })*/}
                {/*                    }}*/}
                {/*                >*/}
                {/*                    选择委托周期*/}
                {/*                </Button>*/}
                {/*                <br/>*/}
                {/*                <br/>{this.state.startDate} {this.state.endDate}*/}
                {/*                /!*<div><br/>开始日期:  {this.state.startDate}<br/><br/>结束日期:  {this.state.endDate}</div>*!/*/}
                {/*            </Form.Item>*/}


                {/*            <Form.Item*/}
                {/*                name='planNumber'*/}
                {/*                label="计划编号"*/}
                {/*                rules={[{required: true, message: '请填写计划编号'}]}*/}
                {/*            >*/}

                {/*                <Selector*/}
                {/*                    columns={2}*/}
                {/*                    options={this.state.planNumberList}*/}
                {/*                    multiple={true}*/}
                {/*                  value={["1","2"]}*/}
                {/*                    onChange={*/}
                {/*                    //this.setState({planListSelected:extend.items})*/}
                {/*                    (arr, extend) => (*/}
                {/*                        console.log(extend.items),*/}
                {/*                        this.setState({planListSelected:extend.items})*/}
                {/*                    )}*/}
                {/*                />*/}
                {/*            </Form.Item>*/}



                {/*            <Form.Item*/}
                {/*                name='reason'*/}
                {/*                label="委托原因"*/}
                {/*                rules={[{required: true, message: '请填写原因'}]}*/}
                {/*            >*/}
                {/*                <TextArea*/}
                {/*                    showCount*/}
                {/*                    maxLength={200}*/}
                {/*                />*/}
                {/*            </Form.Item>*/}
                {/*        </Form>*/}
                {/*    </Tabs.Tab>*/}

                {/*</Tabs>*/}



                {/*按时间段委托底部弹出组件*/}
                <>
                    <Popup
                        visible={this.state.bottonPopShow}
                        // visible = {true}
                        onMaskClick={() => {
                            this.setState({bottonPopShow: false})
                        }}
                        bodyStyle={{minHeight: '70vh'}}
                    >


                        <div style={{padding: "12px", fontSize: "large"}}>
                            {/*{console.log(this.state.entrustedTime[0])}*/}
                            <NoticeBar content='左右滑动查看更多' color='info' />


                            <Swiper
                                indicator={(total, current) => (
                                    <AutoCenter  style={{
                                        position: "absolute",
                                        top: "6px",
                                        right:" 6px",
                                        background: "rgb(210,210,210,0.2)",
                                        padding: "4px",
                                        color: "black",
                                        borderRadius: "4px",
                                        userSelect: "none"}}>
                                        {`${current + 1} / ${total}`}
                                    </AutoCenter>
                                )}
                                loop
                                style={{marginTop:'15px'}}
                            >

                                    {/*{this.state.planListSelected.map((element,index)=>(*/}
                                    {/*    <Swiper.Item key={index}>*/}
                                    {/*        <p>计划号: {element}</p>*/}
                                    {/*        <p>项目名称: {this.state.message}</p>*/}
                                    {/*        <p>日计划: {this.state.message}</p>*/}
                                    {/*        <p>施工日期: {this.state.message}</p>*/}
                                    {/*    </Swiper.Item>*/}
                                    {/*))}*/}


                                {this.state.planListSelected.map((element,index)=>{
                                    //提取计划信息
                                    return(
                                        <Swiper.Item>
                                            <p>计划号: {element["label"]}</p>
                                            <p>项目名称: {element["planName"]}</p>
                                            <p>项目备注:{element["xh"]}</p>
                                            <p>施工日期: {element["dayPlan"]}</p>
                                            <p>施工时间: {element["planDate"]}</p>
                                        </Swiper.Item>
                                    )
                                })}
                            </Swiper>

                            <p>受托人: {this.state.trustee}</p>
                            <p>委托人: {this.state.name}</p>
                            <p>委托周期: {this.state.startDate} — {this.state.endDate}</p>
                            {/*/!*<p>委托周期: {this.state.startDate}-{this.state.endDate}</p>*!/*/}
                            <TextArea
                                placeholder='原因'
                                value={this.state.reason}
                                readOnly
                            />

                            <Button block className='signButton' color='primary ' size='large'
                                    style={{marginTop: "20px"}}
                                    onClick={this.submitSign}>
                                提交委托
                            </Button>
                        </div>
                    </Popup>
                </>


                <Dialog
                    visible={this.state.dialogVisible}
                    content={(
                        <div>

                    {/*    <SearchBar*/}
                    {/*    placeholder='按姓名模糊查找'*/}
                    {/*    showCancelButton*/}
                    {/*    onSearch={val => {*/}
                    {/*        Toast.show(`你搜索了：${val}`)*/}
                    {/*    }}*/}
                    {/*    onFocus={() => {*/}
                    {/*        Toast.show('获得焦点')*/}
                    {/*    }}*/}
                    {/*    onBlur={() => {*/}
                    {/*        Toast.show('失去焦点')*/}
                    {/*    }}*/}
                    {/*    onClear={() => {*/}
                    {/*        Toast.show('清空内容')*/}
                    {/*    }}*/}
                    {/*    onCancel={() => {*/}
                    {/*        Toast.show('取消搜索')*/}
                    {/*    }}*/}
                    {/*/>*/}

                        <CheckList
                        onChange={(value) => {
                            this.setState({trustee: value[0]["name"]})
                            this.setState({trusteeId:value[0]["id"]})
                            this.refIns.current.setFieldsValue({inOrOut: this.state.trustee})
                            console.log(value)
                        }}
                        style={{height: '250px', overflow: "scroll"}}>
                        <div>{
                            list.map((element, index) => {
                                return (<CheckList.Item key={index} value={element}>
                                    <AutoCenter>
                                        {element["name"]}
                                    </AutoCenter>
                                </CheckList.Item>)
                            })
                        }</div>
                    </CheckList>
                        </div>)}
                    closeOnAction
                    onClose={() => {this.setState({dialogVisible: false})}}
                    actions={[
                        {
                            key: 'close',
                            text: '确定',
                        },
                    ]}
                />





            </div>
        )
    }
}